iT邦幫忙

5

住在阿公阿嬤家的孩子- Vue Slots

  • 分享至 

  • xImage
  •  

前言

上禮拜跟老公聊天,聊到最近在研究slot,由於老公沒有學過前端技術,我突發奇想用住在阿公阿嬤家的孩子當解釋,他就聽懂了,覺得自己好棒棒XD但並沒有放在心上,直到昨天Pam問我一些slot的問題,我們先就文件上的文字討論,好像沒有很好的效果,我有點不好意思的說其實我是這樣理解的...講完,Pam表示她好像懂了,突然覺得雖然這樣理解有點好笑,但效果似乎還不錯,就想說可以來寫一篇了,也許可以幫助到一些人吧!就算大家邊看邊笑也沒關係,好久沒有覺得值得寫的東西了哈哈哈哈哈,終於又浮出檯面了。

Slot

我把它想成一個小孩,就先拿我大兒子樂咖來講故事好了XD,假設他目前跟阿嬤一起住,所以人在阿嬤家,但媽媽我在家裡放了一個他的備忘錄,接收樂咖的訊息。

<!-- GrandParent.vue -->
<script setup>
import PapaMama from '@/components/PapaMama.vue'
</script>
<template>
  <PapaMama>
    <!-- 樂咖在阿嬤家講的話 -->
    <p>樂咖想要拿家裡的玩具車</p>
  </PapaMama>
</template>
<!-- PapaMama.vue -->
<script setup></script>
<template>
  <div class="sweet-home">
    <h1>我們這一家</h1>
    <section class="first-kid">
      <h2>樂咖備忘錄</h2>
      <!-- 樂咖在阿嬤家講的話會直接放到這個slot中 -->
      <slot></slot>
    </section>
  </div>
</template>

<style lang="scss" scoped>
.sweet-home {
  border: 3px solid pink;
}
.first-kid {
  border: 3px dotted blue;
}
</style>
  • 畫面顯示如下:
    https://ithelp.ithome.com.tw/upload/images/20240716/20163234EvKoSUu3be.png

Fallback Content

我們可以預設文字,也就是所謂的fallback Content在slot中,當樂咖還沒去阿嬤家時,就會顯示預設文字

<!-- GrandParent.vue -->
<script setup>
import PapaMama from '@/components/PapaMama.vue'
</script>
<template>
  <PapaMama>
    <!-- 樂咖在阿嬤家講的話,先把下面的話註解掉-->
    <!-- <p>樂咖想要拿家裡的玩具車</p> -->
  </PapaMama>
</template>
<!-- PapaMama.vue -->
<script setup></script>
<template>
  <div class="sweet-home">
    <h1>我們這一家</h1>
    <section class="first-kid">
      <h2>樂咖備忘錄</h2>
      <!-- 樂咖在阿嬤家講的話會直接放到這個slot中 -->
       <!-- 在slot中加上預設文字 -->
      <slot>樂咖還在這裡,沒有去阿嬤家喔!</slot>
    </section>
  </div>
</template>

<style lang="scss" scoped>
.sweet-home {
  border: 3px solid pink;
}
.first-kid {
  border: 3px dotted blue;
}
</style>
  • 畫面顯示如下:
    https://ithelp.ithome.com.tw/upload/images/20240716/20163234hBsyQC6kxC.png

Named Slots

當孩子(Slot)只有一個時,永遠不會搞錯,但是當有一個以上時,該怎麼辦呢?相當然爾,就是幫他們命名囉!
樂咖的弟弟嗨啾登場,全部都去阿嬤家吧!現實生活中,如果這樣安靜個幾天,該有多好~~~

<!-- GrandParent.vue -->
<script setup>
import PapaMama from '@/components/PapaMama.vue'
</script>
<template>
  <PapaMama>
    <template class="first-grandson" v-slot:leka>
      <!-- 樂咖在阿嬤家講的話 -->
      <p>樂咖想要拿家裡的玩具車</p>
    </template>
    <template class="second-grandson" v-slot:hichew>
      <!-- 嗨啾在阿嬤家講的話 -->
      <p>嗨啾想要拿家裡的泰迪熊</p>
    </template>
  </PapaMama>
</template>

<style lang="scss" scoped></style>

<!-- PapaMama.vue -->
<script setup></script>
<template>
  <div class="sweet-home">
    <h1>我們這一家</h1>
    <section class="first-kid">
      <h2>樂咖備忘錄</h2>
      <!-- 樂咖在阿嬤家講的話會直接放到這個slot中 -->
      <slot name="leka"></slot>
    </section>
    <section class="second-kid">
      <h2>嗨啾備忘錄</h2>
      <!-- 嗨啾在阿嬤家講的話會直接放到這個slot中 -->
      <slot name="hichew"></slot>
    </section>
  </div>
</template>

<style lang="scss" scoped>
.sweet-home {
  border: 3px solid pink;
}
.first-kid, .second-kid {
  border: 3px dotted blue;
}
</style>

  • 畫面顯示如下:
    https://ithelp.ithome.com.tw/upload/images/20240716/20163234Ai6q4dflFZ.png

Scoped Slot

好的,媽媽接收到訊息後,趕快把兩兄弟分別想要的玩具車跟泰迪熊寄送到阿嬤家去,好讓兩兄弟在阿嬤家開開心心,才會多待幾天呀!你說是不是呢XD

  • 從自己家把東西送阿嬤家兄弟手上的行為就是Scoped Slot

  • 媽媽在家用v-bind將要傳送的玩具跟泰迪熊(資料)綁定給小孩(slot)

<!-- PapaMama.vue -->
<script setup>
const toy = "🚗🚗🚗🚗🚗🚗🚗🚗"
const teddy = "🧸🧸🧸🧸🧸🧸🧸🧸"
</script>
<template>
  <div class="sweet-home">
    <h1>我們這一家</h1>
    <section class="first-kid">
      <h2>樂咖備忘錄</h2>
      <!-- 樂咖在阿嬤家講的話會直接放到這個slot中 -->
      <slot name="leka" :toy="toy"></slot>
    </section>
    <section class="second-kid">
      <h2>嗨啾備忘錄</h2>
      <!-- 嗨啾在阿嬤家講的話會直接放到這個slot中 -->
      <slot name="hichew" :teddy="teddy"></slot>
    </section>
  </div>
</template>

<style lang="scss" scoped>
.sweet-home {
  border: 3px solid pink;
}
.first-kid, .second-kid {
  border: 3px dotted blue;
}
</style>

  • 以樂咖為例:在程式碼上加上v-slot:leka="lekaProps",並在要接收的位置加上{{ lekaProps.toy }},就可以成功收到媽媽寄來的小車車囉!
<!-- GrandParent.vue -->
<script setup>
import PapaMama from '@/components/PapaMama.vue'
</script>
<template>
  <PapaMama>
    <template class="first-grandson" v-slot:leka="lekaProps">
      <!-- 樂咖在阿嬤家講的話 -->
      <p>樂咖想要拿家裡的玩具車</p>
      
      <!-- 收到媽媽寄來的玩具車 -->
      <div>{{ lekaProps.toy }}</div>
      
    </template>
    <template class="second-grandson" v-slot:hichew="hichewProps">
      <!-- 嗨啾在阿嬤家講的話 -->
      <p>嗨啾想要拿家裡的泰迪熊</p>
      
      <!-- 收到媽媽寄來的泰迪熊 -->
      <div>{{ hichewProps.teddy }}</div>
      
    </template>
  </PapaMama>
</template>

<style lang="scss" scoped></style>

  • 畫面顯示如下:
    https://ithelp.ithome.com.tw/upload/images/20240716/20163234cFAziCeh7J.png

後記

不知道這樣的解釋有沒有幫助大家理解,但我自己想了一遍後,對於slot又更清楚了一些,雖然覺得自己的學習方式真的又怪又好笑,但可以理解就好了哈哈哈哈哈!

參考資料:複用元件的好幫手:Vue Slots(v-slot、Scoped Slots)

圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

1 則留言

0
Cavey
iT邦新手 5 級 ‧ 2024-07-17 08:11:49

很有趣的分享,讓我也多學一個Vue的寫法!

/images/emoticon/emoticon41.gif
真心推薦很好用,可以省去資料多層傳遞的麻煩

我要留言

立即登入留言